<template>
  <div>
    <el-form :inline="inline" :model="form" ref="form" label-width="100px">
      <el-form-item v-for="label in labelList" :key="label.model" :label="label.label">
        <el-input
          v-model="form[label.model]"
          :placeholder="`${placeholder}${label.label}`"
          v-if="!label.type"
        />
        <el-select v-model="form[label.model]" placeholder="请选择" v-if="label.type === 'select'">
          <el-option v-for="item in label.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-switch v-model="form[label.model]" v-if="label.type === 'switch'"></el-switch>
        <el-date-picker
          v-model="form[label.model]"
          type="date"
          placeholder="选择日期"
          v-if="label.type === 'date'"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <slot></slot>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'CommonForm',
  props: {
    inline: Boolean,
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    labelList: {
      type: Array,
      default() {
        return []
      }
    },
    placeholder: {
      type: String,
      default: '请输入'
    }
  }
}
</script>
<style lang="scss" scoped>

</style>